<template>
    <div class="m">
        <div class="login-1">
            <div style="width: 100%; text-align: center;margin-top: 10px;"><h3>宠物商店管理员登录</h3></div>
            <div class="input-group">
                <el-input v-model="userName" placeholder="请输入内容"></el-input>
                <el-input v-model="password" placeholder="请输入内容"></el-input>
            </div>
            <div class="bt">
                <el-button type="primary" @click="login()">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Cookie from 'js-cookie'

    export default {
        name: "login",
        data() {
            return {
                userName: '',
                password: ''
            }
        },
        methods: {
            login() {
                this.$http.post('user/manage/login', {
                    userName: this.userName,
                    password: this.password
                }).then(data => {
                    if (data.data.code === 100000) {
                        Cookie.set("token", data.data.data)
                        this.$router.push("/manage")
                    } else {
                        this.$message.error(data.data.msg)
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .m {
        height: 100%;
        background-image: url('../static/img/4.jpg');
    }

    .login-1 {

        /*margin-top: 30vh;*/
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 30%;
        margin: -15% 0 0 -15%;

    }

    .input-group {
        margin: 0px auto;
        height: 100px;
        width: 80%;
        display: flex;
        justify-content: flex-start;
        margin-top: 50px;
    }

    .bt {
        margin-top: 20px;
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
</style>